<template>
  <div class="basic-statistics">
    <div class="chart-container">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="chart-card">
            <div class="chart-title">周转率趋势</div>
            <div class="chart-wrapper">
              <line-chart :chart-data="leftDataLine" v-if="!loading" />
              <el-skeleton :rows="6" animated v-else />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart-card">
            <div class="chart-title">物资周转情况对比</div>
            <div class="chart-wrapper">
              <bar-chart :chart-data="turnoverComparisonData" v-if="!loading" />
              <el-skeleton :rows="6" animated v-else />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="table-container">
      <el-table height="calc(100vh - 530px)" :data="data" border style="width: 100%" v-loading="loading">
        <el-table-column prop="Sku_Code" label="物料代码" />
        <el-table-column prop="GMP_Bar" label="GMP码" />
        <el-table-column prop="SenderCode" label="供应商代码" />
        <el-table-column prop="Sku_Name" label="物料名称"  />
        <el-table-column prop="materialspec" label="规格"  />
        <el-table-column prop="cunit_name" label="单位" />
        <el-table-column prop="BeginNum" label="期初库存" />
        <el-table-column prop="DurInNum" label="期间入库" />
        <el-table-column prop="EndNum" label="期末库存"/>
        <el-table-column prop="AverageNum" label="平均库存"/>
        <el-table-column prop="DurOutNum" label="出库数量"/>
        <el-table-column prop="DurReturnNum" label="退库数量"/>
        <el-table-column prop="RealOutNum" label="净出库数量"/>
        <el-table-column prop="Velocity" label="周转率">
            <template #default="{ row }">
              <span>{{(row.Velocity).toFixed(2)}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="TurnaroundDays" label="周转天数">
          <template #default="{ row }">
            <span>{{(row.TurnaroundDays).toFixed(2)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="UsageNum" label="使用率">
          <template #default="{ row }">
            <span>{{(row.UsageNum).toFixed(2)}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import LineChart from '../charts/LineChart.vue'
  import BarChart from '../charts/BarChart.vue'

  export default {
    name: 'BasicStatistics',
    components: {
      LineChart,
      BarChart
    },
    props: {
      dataLeft:{
        type: Array,
        default: () => []
      },
      data: {
        type: Array,
        default: () => []
      },
      loading: {
        type: Boolean,
        default: false
      },
      dateRange: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        sortProp: '',
        sortOrder: '',
        warehouseData: [],
        chart: null,
        leftDataLine:[],//折线图
      }
    },
    computed: {
      turnoverComparisonData() {
        // 生成物资周转情况对比数据
        return {
          xAxis: this.warehouseData.map(item => item.Sku_Name),
          series: [{
              name: '周转率',
              data: this.warehouseData.map(item => item.Velocity)
            },
            {
              name: '使用率',
              data: this.warehouseData.map(item => item.UsageNum)
            }
          ]
        }
      }
    },
    watch: {
      data: {
        handler(newVal) {
          this.total = newVal.length;
          this.warehouseData = newVal.slice(0, 10);
        },
        immediate: true
      },
      dataLeft: {
        handler(newVal) {
          this.leftDataLine = newVal;
        },
        immediate: true
      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  .basic-statistics {
    padding: 10px;
  }

  .chart-container {
    margin-bottom: 20px;
  }

  .chart-card {
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  .chart-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
  }

  .chart-wrapper {
    height: 300px;
  }

  .table-container {
    margin-top: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
</style>
